import React, { lazy, Suspense } from 'react';
import { Spin } from 'antd';

export default function LazyComponent() {
  const CurrentComponent = lazy(() => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          default() {
            return <div>LazyComponent</div>;
          },
        } as any);
      }, 3000);
    });
  });
  return (
    <div style={{ height: '100%' }}>
      <Suspense
        fallback={
          <Spin
            size="large"
            // tip="Loading..."
            // fullscreen
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              height: '100%',
            }}
          />
        }
      >
        <CurrentComponent />
      </Suspense>
    </div>
  );
}
